<template>
	<image src="@/static/login/top.jpg" mode="widthFix" style="width: 100%;height:auto;"></image>
	<view class="tn-p-lg" style="position: absolute;left: 50%;transform: translateX(-50%);z-index: 9999;">
		<tn-form ref="formRef" :model="formData" :rules="formRules">
			<tn-form-item label="账号" prop="username" label-position="top">
				<tn-input v-model="formData.username" size="lg" placeholder="请输入账号" clearable>
					<template #prefix>
						<tn-icon type="info" name="my" />
					</template>
				</tn-input>
			</tn-form-item>
			<tn-form-item label="密码" prop="password" label-position="top">
				<tn-input v-model="formData.password" size="lg" placeholder="请输入密码" clearable type="password">
					<template #prefix>
						<tn-icon type="info" name="lock" />
					</template>
				</tn-input>
			</tn-form-item>
		</tn-form>
		<view class="tn-flex tn-flex-center tn-m-xs">
			<tn-button width="80vw" height="90" bg-color="tn-gradient-bg__cool-5" text-color="rgb(255,255,255)"
				@click="submitForm">登录</tn-button>
		</view>
	</view>
	<image src="@/static/login/bottom.jpg" mode="widthFix"
		style="width: 100%;height:auto;position: fixed; bottom: 0;left: 0;height: auto;"></image>
	<tn-modal ref="modalRef" />
</template>
<script setup>
	import {
		loginApi
	} from "@/request/login/index.js"
	import {
		reactive,
		ref
	} from 'vue'

	const modalRef = ref()
	const formRef = ref()
	const formData = reactive({
		username: '',
		password: '',
	})
	const formRules = {
		username: [{
			required: true,
			message: '请输入用户名',
			trigger: ['change', 'blur']
		}, ],
		password: [{
			required: true,
			message: '请输入密码',
			trigger: ['change', 'blur']
		}, ]
	}
	// 提交表单
	const submitForm = () => {
		formRef.value?.validate((valid) => {
			if (valid) {
				loginApi(formData).then(res => {
					if (res.code == 0) {
						uni.setStorageSync('token', res.data.token)
						uni.showToast({
							title: '登录成功',
							mask: true,
							duration: 1000,
							success() {
								setTimeout(() => {
									uni.reLaunch({
										url: '/pages/index/index'
									})
								}, 1000)
							}
						})
					}
				}).catch(err => {
					modalRef.value?.showModal({
						title: '提示',
						content: err.message,
					})
				})
			} else {
				uni.showToast({
					title: '请检查必填项',
					icon: 'none',
				})
			}
		})
	}
</script>

<style scoped lang="scss">

</style>